<template>
	<view>
		<NavigationBar title="分类"></NavigationBar>
        <view ref="wrap" class="wrap">
            <view>
                <view @click="letter=item" class="item" v-for="(item,index) of ['a','b','c','d','e','f','g','h','j','k']" :key="index" :ref="item" >第{{index}}个{{item}}项</view>
            </view>
        </view>
	</view>
</template>

<script>
import NavigationBar from '../../common/NavigationBar'
import BScroll from 'plugin/better-scroll'
export default {
    components:{
        NavigationBar
    },
    data() {
        return {
            letter: 'c',
        }
    },
    watch:{
        letter(){
            const elem = this.$refs[this.letter][0].$el
            console.log(elem);
            this.scroll.scrollToElement(elem);
            // console.log(this.scroll.scrollToElement);
        }
    },
    methods: {
        
    },
    mounted(){
        console.log(this.$refs.wrap.$el);
        this.scroll = new BScroll(this.$refs.wrap.$el,{
          mouseWheel: true,
          click: true,
          tap: true
        })
        // console.log(this.scroll);
    }
}
</script>

<style lang="stylus" scoped>
    .wrap
        position absolute
        overflow hidden
        top 200rpx
        left 0
        right 0
        bottom 0
        .item
            height 200rpx
</style>
